import React from 'react';
import {Row, Col, Form, Select, Modal, InputNumber, Input, Button} from 'antd';
import { connect } from 'dva';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams';
import CurrencySelect from '../../../components/commons/CurrencySelect'

const FormItem = Form.Item;
export default connect(({logisticsSupplier, customerManage}) => ({logisticsSupplier, customerManage}))((
    Form.create({wrappedComponentRef: true})(class CostDetail extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
                type: "1", //1.查看费用 2.新增费用 3.申报费用
                dataSource: {},
                order: {},
                searchConditions: {},
            }
        }

        handleOpen = (dataSource, type, order, searchConditions) => {
            searchConditions.orderId = searchConditions.id;
            this.setState({
                dataSource: dataSource,
                open: true,
                type: type,
                order: order,
                searchConditions: searchConditions
            });
        }

        handleClose = () => {
            this.setState({open: false});
            this.props.form.resetFields();
        }

        handleSaveCost = () => {
            this.props.form.validateFields((errors, values) => {
                if (errors) {
                    return;
                }
                values.orderid = this.state.searchConditions.id;
                this.props.dispatch({
                    type: 'orderCost/addOrderCost',
                    payload: {
                        ...values,
                        searchConditions: this.state.searchConditions
                    },

                })
                this.handleClose();
            })
        }

        handleApplyCost = () => {
            this.props.form.validateFields((errors, values) => {
                if (errors) {
                    return;
                }
                values.orderid = this.state.searchConditions.id;
                values.id = this.state.dataSource.id;
                values.status = "3";

                this.props.dispatch({
                    type: 'orderCost/updateOrderCost',
                    payload: {
                        ...values,
                        searchConditions: this.state.searchConditions,
                        onSuccess: () => {
                            this.handleClose();
                        }
                    },
                })
            })
        }


        getProvider = (e) => {
            this.props.form.setFieldsValue({providerId: ''});
            let values = this.props.form.getFieldsValue();
            let type = R.isNil(e) ? values.providerType : e;
            if (type === '0') {
                this.props.dispatch({type: 'customerManage/queryCustomerManageList', payload: {status: 4}});//查询工厂供应商列表
            } else {
                this.props.dispatch({type: 'logisticsSupplier/getSupplierList'});
            }
        };


        render() {
            let titles = {"1": "查看费用", "2": "添加费用", "3": "申报费用"};
            let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
            let {getFieldDecorator} = this.props.form;

            let footer = [
                <Button key="save" size="large" onClick={this.handleSaveCost.bind(this)}
                        style={{display: this.state.type === "2" ? "inline-block" : "none"}}>保存</Button>,
                <Button key="apply" size="large" onClick={this.handleApplyCost.bind(this)}
                        style={{display: this.state.type === "3" ? "inline-block" : "none"}}>确认</Button>,
                <Button key="cancel" size="large" onClick={this.handleClose.bind(this)}
                        style={{display: this.state.type !== "1" ? "inline-block" : "none"}}>取消</Button>
            ]

            let suppilerList = [];
            let gcsuppilerList = R.isNil(this.props.customerManage.suppilerList) ? [] : this.props.customerManage.suppilerList;
            let wlsuppilerList = R.isNil(this.props.logisticsSupplier.supplierList) ? [] : this.props.logisticsSupplier.supplierList;
            suppilerList = this.props.form.getFieldValue('providerType') === '0' ? gcsuppilerList : wlsuppilerList;

            return (
                <Modal maskClosable={false} footer={footer} visible={this.state.open} title={titles[this.state.type]}
                       width={760} wrapClassName="vertical-center-modal" onCancel={this.handleClose.bind(this)}>
                    <Form>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="订单编号" hasFeedback>
                                    {R.isNil(this.state.order.orderno) ? "" : this.state.order.orderno}
                                </FormItem>
                            </Col>
                            {/*<Col span={12}>*/}
                                {/*<FormItem {...formItemLayout} label="供应商类型" hasFeedback>*/}
                                    {/*{getFieldDecorator('providerType', {*/}
                                        {/*rules: [{*/}
                                            {/*required: true, message: '请选择供应商类型'*/}
                                        {/*}],*/}
                                        {/*initialValue: this.state.dataSource.providerType*/}
                                    {/*})(*/}
                                        {/*<Select disabled={this.state.type !== "2"} allowClear*/}
                                                {/*onChange={value => this.getProvider(value)}>*/}
                                            {/*<Select.Option value="0">工厂供应商</Select.Option>*/}
                                            {/*<Select.Option value="1">物流供应商</Select.Option>*/}
                                        {/*</Select>*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                            {/*</Col>*/}
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="物流供应商" hasFeedback>
                                    {getFieldDecorator('providerId', {
                                        rules: [{
                                            required: true, message: '请选择物流供应商'
                                        }],
                                        initialValue: this.state.dataSource.providerId
                                    })(
                                        <Select style={{width: '100%'}} disabled={this.state.type !== "2"} showSearch
                                                placeholder="可通过输入关键字搜索"
                                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                            {
                                                !R.isNil(wlsuppilerList) ? wlsuppilerList.map(item => {
                                                    return (<Select.Option value={item.id} key={item.id}>{item.companyname}</Select.Option>);
                                                }) : ''
                                            }
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="费用类型" hasFeedback>
                                    {getFieldDecorator('type', {
                                        rules: [{
                                            required: true, message: '请选择费用类型'
                                        }],
                                        initialValue: "0"
                                    })(
                                        <Select disabled={true}>
                                            <Select.Option value="0">应付</Select.Option>
                                            <Select.Option value="1">应收</Select.Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="费用种类" hasFeedback>
                                    {getFieldDecorator('chargetype', {
                                        rules: [{
                                            required: true, message: '请选择费用种类'
                                        }],
                                        initialValue: this.state.dataSource.chargeType
                                    })(
                                        <BizParams sprCode='chargeType' disabled={this.state.type !== "2"}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="费用金额" hasFeedback>
                                    {getFieldDecorator('cost', {
                                        rules: [{
                                            required: true, message: '请输入费用金额'
                                        }],
                                        initialValue: this.state.dataSource.cost
                                    })(
                                        <InputNumber disabled={this.state.type !== "2"} style={{width: '100%'}}
                                                     max={99999999999999} precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="币种" hasFeedback>
                                    {getFieldDecorator('chargecurrency', {
                                        rules: [{
                                            required: true, message: '请选择币种'
                                        }],
                                        initialValue: "CNY"
                                    })(
                                        <CurrencySelect disabled={true}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="备注" hasFeedback>
                                    {getFieldDecorator('memo', {
                                        initialValue: this.state.dataSource.memo
                                    })(
                                        <Input.TextArea disabled={this.state.type !== "2"} maxLength="100"
                                                        autosize={true}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="余额" hasFeedback>
                                    {getFieldDecorator('balance', {
                                        rules: [{
                                            required: true, message: '请输入余额'
                                        }],
                                        initialValue: this.state.dataSource.balance ? this.state.dataSource.balance : this.props.form.getFieldValue('cost')
                                    })(
                                        <InputNumber disabled={true} style={{width: '100%'}} max={99999999999999}
                                                     precision={2}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    })
))